import { CreateElement, VNode } from 'vue';
import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options';

/**
 * 日历组件输入属性
 *
 * @export
 * @interface iBizCalendarVueProps
 */
export interface iBizCalendarVueProps {
    option: any;
    items: any[]
}

/**
 * 日历组件
 */
export const iBizCalendarVue: ThisTypedComponentOptionsWithRecordProps<any, any, any, any, iBizCalendarVueProps> = {
    props: {
        option: {
            type: Object,
            default: () => { }
        },
        items: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            calendar: null
        };
    },
    mounted() {
        this.calendar = this.$refs.iBizCalendar;
    },
    methods: {
        calendarDidLoad(): void {
            this.setOption()
            this.setItems()
        },
        setOption(option?: any): void {
            this.calendar.option = option || this.option;
        },
        setItems(items?: any[]): void {
            this.calendar.items = items || this.items;
        },
        dataChangeEmit(e: any): void {
            this.$emit('item-change', e.detail);
        },
        itemClickEmit(e: any): void {
            this.$emit('item-click', e.detail);
        },
        newItemEmit(e: any): void {
            this.$emit('item-new', e.detail)
        }
    },
    watch: {
        option(): void {
            this.setOption();
        },
        items(): void {
            this.setItems();
        }
    },
    // 绘制组件
    render(h: CreateElement): VNode {
        return h('ibz-calendar', {
            ref: 'iBizCalendar',
            on: {
                'did-load': this.calendarDidLoad,
                'data-change': this.dataChangeEmit,
                'item-click': this.itemClickEmit,
                'new-item': this.newItemEmit
            }
        }, this.$slots.default);
    }
};
